<template>
  <div
    class="relative h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200"
  >
    <!-- PC端 头部图标 -->
    <div class="hidden pt-5 h-8 xl:block">
      <img class="m-auto" src="" alt="" />
    </div>
    <!-- 移动端 头部图标 -->
    <div class="h-[111px] xl:hidden">
      <img class="dark:hidden" src="" alt="" />
      <img
        class="h-5 absolute top-[5%] left-[50%] translate-x-[-50%]"
        src=""
        alt=""
      />
    </div>

    <!-- 表单 -->
    <div
      class="block px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-8 xl:py-4 xl:rounded-sm xl:shadow-lg"
    >
      <h3
        class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300 xl:block"
      >
        Login To TBlog
      </h3>
      <!-- 表单 -->
      <form>
        <input
          type="text"
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          name="username"
          placeholder="username"
          autocomplete="on"
        />

        <input
          type="text"
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          name="password"
          placeholder="password"
          autocomplete="on"
        />
        <!-- 注册按钮 -->
        <div class="pt-1 pb-3 leading-[0px] text-right">
          <a
            class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer"
            >To Register
          </a>
        </div>
        <!-- 登陆按钮 -->
        <m-button class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800">
          Login
        </m-button>
        <!-- 第三方登录 -->
        <div class="flex justify-around mt-4">
          <m-svg-icon class="w-4 cursor-pointer" name="qq"></m-svg-icon>
          <m-svg-icon class="w-4 cursor-pointer" name="weixin"></m-svg-icon>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup></script>

<style scoped></style>
